<template>
	<div style="background-color: #FFFFFF;">
		<div class="demand-list u-box">
			<!-- 轮播图 -->
			<div class="search u-mt-10 u-pb-10">
			  <div class="search-width">
				<u-search :show-action="false" placeholder="搜索工作机会" v-model="keyword" @search="search"></u-search>
			  </div>
			</div>
			<u-tabs :list="tabList" :current="current"  @change="change"></u-tabs>
		
			<!-- 需求列表 -->
			<ul>
			  <li
				  class="u-border-bottom u-pt-15 u-pb-15"
				  @click="routePage(item)"
				  v-for="(item, index) in dataList"
			  >
				<!-- 标题 -->
				<div class="u-title u-flex u-row-between u-col-center u-mb-5">
				  <div class="u-flex u-col-center u-flex-1">
					<div>
					  <u-tag
						  :text="item.XType.label"
						  mode="dark"
						  size="mini"
						  :bg-color="item.XType.color"
					  ></u-tag>
					</div>
					<div class="job-name">
					  {{ item.XSubject }}
					</div>
				  </div>
				  <div class="u-fz-20 u-cl-error" v-if="item.XPrice && item.XType.label!='招聘'">￥{{ item.XPrice }}</div>
				</div>
				<!-- 标签 -->
				<div class="u-scroll-x u-mr-5" style="display: flex;justify-content: flex-start;" v-if="item.XKeyWord">
				  <u-tag
					  v-for="(titem, tindex) in item.XKeyWord.split(',')"
					  :key="tindex"
					  :text="titem"
					  type="info"
					  mode="dark"
					  size="mini"
				  ></u-tag>
				</div>
				<!-- 内容 -->
				<div class="u-line-1 u-cl-content u-mb-5">
				  {{ item.XDetails }}
				</div>
				<!-- 时间 -->
				<div class="u-cl-content u-fz-12">发布时间：{{ item.XDatetime }}</div>
			  </li>
			</ul>
		
			<!-- 加载更多 -->
			<request-status :status="status"></request-status>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
		pageNum: 1,
		pageSize: 10,
		dataList: [],
		keyword: '',
		searchStr: ''
	};
  },

  onLoad(options) {
      if(this.isNotNull(options.keyword)) {
		  this.keyword = options.keyword
		  this.searchStr = options.keyword
	  }
	  this.getDemandList()
  },
  
  onPullDownRefresh() {
	this.pageNum = 1
    this.getDemandList();
    // 停止Loading
    uni.stopPullDownRefresh();
  },
  
  onReachBottom() {
	  	this.pageNum += 1
		this.getDemandList();
  },

  methods: {
	  
	  /**
	   * 搜索
	   */
	  async search() {
		  this.searchStr = this.keyword
		  this.pageNum = 1
		  this.getDemandList()
		  
	  },
	  
	  /** 
	   * 获取需求列表数据
	   */
	  async getDemandList() {
			let result = await this.$u.api.unifyRequest({
				  appid: 'AppletsPro',
				  wf_num: 'R_AppletsPro_B017',
				  pageNum: this.pageNum,
				  pageSize: this.pageSize,
				  keyword: this.searchStr,
				  loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if (result.code == '200') {
				  if (this.pageNum != 1) {
					this.dataList = this.dataList.concat(result.data)
				  } else {
					this.dataList = result.data
				  }
			}
	  },
	  
	  /** 
	   * 路由跳转
	   */
	  routePage(item) {
		  this.$u.route(item.XType.url)
	  }
	  
  }
};
</script>

<style lang="scss" scoped>
	.job-name {
	  width: 400rpx;
	  height: 50rpx;
	  text-overflow: -o-ellipsis-lastline;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 1;
	  line-clamp: 1;
	  -webkit-box-orient: vertical;
	}
	
	.search {
	  width: 100%;
	  text-align: left;
	  background-color: #fff;
	  padding-top: 10 rpx;
	}
	
	.search-width {
	  width: 95%;
	  margin: 0 auto;
	}
</style>
